<template>
	<view class="vip-page">
		<!-- 会员专区头部 -->
		<view class="vip-header">
			<image class="vip-banner" src="/static/vip.png" mode="aspectFill"></image>
			<view class="vip-title">
				<text class="main-title">超级会员</text>
				<text class="sub-title">享受尊贵特权体验</text>
			</view>
		</view>

		<!-- 会员权益 -->
		<view class="benefits-section">
			<view class="section-header">
				<text class="section-title">会员特权</text>
				<text class="section-subtitle">尊享多重会员权益</text>
			</view>
			<view class="benefits-list">
				<view class="benefit-item">
					<view class="benefit-icon">
						<text class="icon-text">✓</text>
					</view>
					<view class="benefit-content">
						<text class="benefit-title">无广告体验</text>
						<text class="benefit-desc">享受纯净无打扰的使用环境</text>
					</view>
				</view>
				<view class="benefit-item">
					<view class="benefit-icon">
						<text class="icon-text">✓</text>
					</view>
					<view class="benefit-content">
						<text class="benefit-title">高速下载</text>
						<text class="benefit-desc">享受更快的视频解析和下载速度</text>
					</view>
				</view>
				<view class="benefit-item">
					<view class="benefit-icon">
						<text class="icon-text">✓</text>
					</view>
					<view class="benefit-content">
						<text class="benefit-title">无限制下载次数</text>
						<text class="benefit-desc">摆脱每日下载限制的束缚</text>
					</view>
				</view>
				<view class="benefit-item">
					<view class="benefit-icon">
						<text class="icon-text">✓</text>
					</view>
					<view class="benefit-content">
						<text class="benefit-title">更多高级功能</text>
						<text class="benefit-desc">优先体验平台后续推出的新功能</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 会员套餐选择 -->
		<view class="packages-section">
			<view class="section-title-wrapper">
				<text class="section-title">选择套餐</text>
				<text class="section-subtitle">开通会员享受尊贵特权</text>
			</view>
			<view class="packages-section-content">
				<view v-if="!loading" class="packages-list">
					<view v-for="(pkg, index) in packages" :key="pkg.id" class="package-item"
						:class="{ active: selectedPackage === index }" @click="selectPackage(index)">
						<!-- 会员名称和标签 -->
						<view class="package-header">
							<text class="package-name">{{ pkg.name }}</text>
							<view v-if="pkg.id==8" class="best-value-badge">
								<text class="best-value-text">推荐</text>
							</view>
						</view>

						<!-- 价格展示 -->
						<view class="package-price">
							<text class="price">¥{{ pkg.price }}</text>
							<text class="original-price">¥{{ pkg.originalPrice }}</text>
							<view class="discount-tag" v-if="pkg.originalPrice > pkg.price">
								<text>{{ Math.round((1 - pkg.price / pkg.originalPrice) * 100) }}% OFF</text>
							</view>
						</view>

						<!-- 会员权益描述 -->
						<view class="package-details">
							<view class="detail-item">
								<text class="detail-icon">🎁</text>
								<text class="detail-text">{{ pkg.description }}</text>
							</view>
						</view>

						<!-- 选择指示器 -->
						<view class="select-indicator-wrapper">
							<view class="select-indicator" :class="{ selected: selectedPackage === index }"></view>
						</view>
					</view>
				</view>
				<view v-else-if="loading" class="loading-container">
					<view class="loading-spinner"></view>
					<text class="loading-text">加载中...</text>
				</view>
				<view v-else-if="error" class="error-container">
					<text class="error-icon">⚠️</text>
					<text class="error-text">{{ error }}</text>
					<button @click="fetchVipPackages" class="retry-btn">重新加载</button>
				</view>
			</view>

			<!-- 底部购买按钮 -->
			<view class="bottom-bar">
				<view class="selected-info">
					<text class="select-label">已选套餐：</text>
					<text
						class="select-name">{{ packages.length > 0 && packages[selectedPackage] ? packages[selectedPackage].name : '请选择套餐' }}</text>
					<view class="price-container">
						<text
							class="select-price">¥{{ packages.length > 0 && packages[selectedPackage] ? packages[selectedPackage].price : 0 }}</text>
						<text
							v-if="packages.length > 0 && packages[selectedPackage] && packages[selectedPackage].originalPrice > packages[selectedPackage].price"
							class="price-saving">
							省¥{{ packages[selectedPackage].originalPrice - packages[selectedPackage].price }}
						</text>
					</view>
				</view>
				<button class="purchase-btn" @click="purchaseVip">
					<text class="btn-text">立即开通</text>
				</button>
			</view>

			<!-- 支付确认弹窗 -->
			<view class="popup-overlay" v-if="showPaymentPopup">
				<view class="popup-content">
					<text class="popup-title">确认支付</text>
					<view class="popup-body">
						<text
							class="payment-amount">¥{{ packages.length > 0 && packages[selectedPackage] ? packages[selectedPackage].price : 0 }}</text>
						<text
							class="payment-package">{{ packages.length > 0 && packages[selectedPackage] ? packages[selectedPackage].name : '' }}</text>
						
						<!-- 支付方式选择 -->
						<view class="payment-methods">
							<text class="payment-methods-title">选择支付方式</text>
							<view class="payment-method-item" :class="{ active: paymentType === 'alipay' }" @click="paymentType = 'alipay'">
								<text class="payment-method-name">支付宝扫码</text>
								<view class="payment-method-icon" v-if="paymentType === 'alipay'">✓</view>
							</view>
							<view class="payment-method-item" :class="{ active: paymentType === 'wxpay' }" @click="paymentType = 'wxpay'">
								<text class="payment-method-name">微信支付扫码</text>
								<view class="payment-method-icon" v-if="paymentType === 'wxpay'">✓</view>
							</view>
						</view>
					</view>
					<view class="popup-footer">
						<button class="cancel-btn" @click="closePopup">取消</button>
						<button class="confirm-btn" @click="confirmPayment">确认支付</button>
					</view>
				</view>
			</view>

			<!-- 支付成功弹窗 -->
			<view class="popup-overlay" v-if="showSuccessPopup">
				<view class="popup-content success-popup">
					<view class="success-icon">✓</view>
					<text class="success-title">开通成功</text>
					<text class="success-text">恭喜您成为超级会员！</text>
					<button class="success-btn" @click="completePurchase">完成</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedPackage: 0, // 默认选择第一个套餐
				packages: [],
				loading: true,
				error: '',
				showPaymentPopup: false,
				showSuccessPopup: false,
				paymentType: 'alipay' // 默认支付方式
			};
		},
		onShow() {
			// 页面加载时获取会员套餐数据
			this.fetchVipPackages();
		},
		onLoad() {
			// 页面加载时获取会员套餐数据
		},
		methods: {
			// 获取会员套餐数据
			fetchVipPackages() {
				this.loading = true;
				this.error = '';

				uni.request({
					url: 'https://qyapi.ipaybuy.cn/api/get_vip_list?type=1',
					method: 'GET',
					success: (res) => {
						if (res.data && res.data.code === 200) {
							// 处理返回的数据，设置会员套餐信息
							this.packages = res.data.data.map((item) => ({
								id: item.id,
								name: item.name,
								price: item.price,
								originalPrice: item.originalPrice,
								duration: item.duration,
								dayRequestNum: item.dayRequestNum,
								description: this.formatDescription(item.duration),
								isBestValue: false // 设置永久推荐
							}));
							// 确保默认选中一个有效的套餐
							this.selectedPackage = this.packages.length > 0 ? 0 : 0;
						} else {
							this.error = res.data?.msg || '获取会员套餐失败';
							console.error('获取会员套餐失败:', res.data);
						}
					},
					fail: (err) => {
						this.error = '网络请求失败，请稍后重试';
						console.error('网络请求失败:', err);
					},
					complete: () => {
						this.loading = false;
					}
				});
			},

			// 格式化会员时长描述
			formatDescription(duration) {
				if (duration >= 9999) {
					return '永久会员权益';
				} else if (duration >= 365) {
					return '365天会员权益';
				} else {
					return `${duration}天会员权益`;
				}
			},
			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			},

			// 选择套餐
			selectPackage(index) {
				this.selectedPackage = index;
			},

			// 打开支付确认弹窗
			purchaseVip() {
				// 检查是否登录
				const token = uni.getStorageSync('loginToken');
				if (!token) {
					uni.showModal({
						title: '提示',
						content: '请先登录后再开通会员',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
					return;
				}

				// 打开支付弹窗
				this.showPaymentPopup = true;
			},

			// 关闭弹窗
			closePopup() {
				this.showPaymentPopup = false;
			},

			// 确认支付
			confirmPayment() {
				// 检查token
				const token = this.getToken();
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					// 跳转到登录页面
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return;
				}

				// 关闭支付弹窗
				this.showPaymentPopup = false;
				this.loading = true;

				// 获取选中的套餐信息
				const selectedPackageInfo = this.packages[this.selectedPackage];
				if (!selectedPackageInfo) {
					uni.showToast({
						title: '请选择套餐',
						icon: 'none'
					});
					this.loading = false;
					return;
				}
				
				// 构建请求参数
				const requestParams = {
					VipId: selectedPackageInfo.id || '1',
					UserId: this.getUserId(),
					TimeId: '1',
					PayType: this.paymentType
				};
				
				console.log('支付请求参数:', requestParams);

				// 调用创建订单接口
				uni.request({
					url: 'https://qyapi.ipaybuy.cn/api/pay',
					method: 'POST',
					header: {
						'token': `${token}`,
						'content-type': 'application/json'
					},
					data: requestParams,
					success: (res) => {
						console.log('创建订单响应:', res.data);
						
						if (res.data && res.data.code === 1) {
							// 获取trade_no
							const tradeNo = res.data.trade_no;
							
							if (tradeNo) {
								// 跳转到支付页面
								const payUrl = `https://open.ipaybuy.cn/pay/${tradeNo}`;
								uni.navigateTo({
									url: `/pages/webview/webview?url=${encodeURIComponent(payUrl)}`
								});
							} else {
								uni.showToast({
									title: '获取订单信息失败',
									icon: 'none'
								});
							}
						} else {
							uni.showToast({
								title: res.data?.msg || '创建订单失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('创建订单失败:', err);
						uni.showToast({
							title: '网络请求失败，请稍后重试',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},



			// 获取用户Token
			getToken() {
				const token = uni.getStorageSync('loginToken');
				console.log("测试",token);
				if (!token) {
					console.warn('未找到用户token，可能需要重新登录');
					// 实际应用中可以在这里处理未登录的情况
				}
				return token;
			},
			
			// 获取用户ID
			getUserId() {
				const userId = uni.getStorageSync('userId');
				return userId; // 如果有存储的用户信息，使用其中的userId，否则使用默认值
			},

			// 完成购买流程
			completePurchase() {
				this.showSuccessPopup = false;
				// 返回我的页面
				uni.switchTab({
					url: '/pages/me/me'
				});
			}
		}
	};
</script>

<style scoped>
	/* 页面全局样式 */
	.vip-page {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding-bottom: 100rpx;
	}

	/* 页面头部 */
	.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		padding: 0 30rpx;
		background-color: white;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.header-left,
	.header-right {
		width: 60rpx;
	}

	.back-icon {
		font-size: 48rpx;
		color: #333;
		font-weight: bold;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	/* 会员头部 */
	.vip-header {
		position: relative;
		padding: 40rpx 30rpx;
		background: linear-gradient(135deg, #ff9f43, #ff6b6b);
		text-align: center;
		color: white;
	}

	.vip-banner {
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.main-title {
		font-size: 44rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}

	.sub-title {
		font-size: 28rpx;
		opacity: 0.9;
	}

	/* 通用区块样式 */
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin: 30rpx 0 20rpx 30rpx;
	}

	/* 会员权益部分 */
	.benefits-section {
		padding: 40rpx;
		background: #fff;
		margin: 0 0 30rpx 0;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.section-header {
		text-align: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
		background: linear-gradient(135deg, #ff6b6b, #ff9e6b);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.section-subtitle {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	.benefits-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.benefit-item {
		padding: 24rpx;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		border-left: 6rpx solid #ff6b6b;
		display: flex;
		align-items: center;
		transition: all 0.3s ease;
	}

	.benefit-item:active {
		transform: scale(0.98);
		background-color: #f0f0f0;
	}

	.benefit-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(135deg, #ff6b6b, #ff9e6b);
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.icon-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.benefit-content {
		flex: 1;
	}

	.benefit-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 4rpx;
		display: block;
	}

	.benefit-desc {
		font-size: 24rpx;
		color: #666;
		display: block;
		line-height: 1.4;
	}

	/* 响应式调整 */
	@media (max-width: 320px) {
		.benefits-section {
			padding: 30rpx;
		}

		.benefit-item {
			padding: 20rpx;
		}

		.benefit-icon {
			width: 50rpx;
			height: 50rpx;
			margin-right: 15rpx;
		}

		.icon-text {
			font-size: 28rpx;
		}
	}

	/* 套餐选择 */
	.packages-section {
		margin-bottom: 30rpx;
		background-color: #f9f9f9;
		padding: 30rpx 0;
		border-radius: 20rpx;
		margin: 0 30rpx 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.section-title-wrapper {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.section-subtitle {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
		display: block;
		font-weight: 400;
	}

	.packages-list {
		padding: 0 30rpx;
	}

	.package-item {
		position: relative;
		background-color: white;
		border-radius: 16rpx;
		padding: 35rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		border: 3rpx solid transparent;
		transition: all 0.3s ease;
		cursor: pointer;
		overflow: hidden;
	}

	/* 为推荐套餐添加特殊样式 */
	.package-item:nth-child(3) {
		position: relative;
		overflow: visible;
	}

	.package-item:nth-child(3)::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 8rpx;
		background: linear-gradient(90deg, #ff6b6b, #ff9f43);
		border-radius: 16rpx 16rpx 0 0;
	}

	.package-item.active {
		border-color: #ff6b6b;
		box-shadow: 0 8rpx 24rpx rgba(255, 107, 107, 0.25);
		transform: translateY(-2rpx);
	}

	.package-item:active {
		transform: scale(0.98);
		transition: transform 0.1s ease;
	}

	.package-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.package-name {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		position: relative;
		z-index: 1;
	}

	.best-value-badge {
		background: linear-gradient(135deg, #ff6b6b, #ff9f43);
		color: white;
		font-size: 20rpx;
		padding: 4rpx 16rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
		position: relative;
		z-index: 1;
		margin-right: 80rpx;
	}

	.package-price {
		display: flex;
		align-items: baseline;
		margin-bottom: 20rpx;
		position: relative;
	}

	.price {
		font-size: 48rpx;
		font-weight: bold;
		color: #ff6b6b;
		margin-right: 12rpx;
		font-family: 'Helvetica Neue', Arial, sans-serif;
	}

	.original-price {
		font-size: 28rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	/* 折扣标签 */
	.discount-tag {
		position: absolute;
		right: 0;
		background-color: #fff0e6;
		color: #ff6b6b;
		font-size: 20rpx;
		font-weight: bold;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		border: 2rpx solid #ff6b6b;
	}

	/* 套餐详情列表 */
	.package-details {
		margin-bottom: 10rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.detail-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.detail-text {
		font-size: 26rpx;
		color: #666;
	}

	/* 选择指示器 */
	.select-indicator-wrapper {
		position: absolute;
		top: 35rpx;
		right: 35rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.select-indicator {
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		border: 3rpx solid #ddd;
		transition: all 0.3s ease;
		position: relative;
	}

	.select-indicator.selected {
		background-color: #ff6b6b;
		border-color: #ff6b6b;
		transform: scale(1.1);
	}

	.select-indicator.selected::after {
		content: '✓';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 20rpx;
		font-weight: bold;
	}

	.selected-text {
		font-size: 24rpx;
		color: #ff6b6b;
		font-weight: 500;
	}

	/* 加载状态优化 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;
		color: #666;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 6rpx solid #f3f3f3;
		border-top: 6rpx solid #ff6b6b;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		font-size: 28rpx;
		color: #666;
	}

	/* 错误状态优化 */
	.error-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 30rpx;
		text-align: center;
	}

	.error-icon {
		font-size: 60rpx;
		margin-bottom: 20rpx;
	}

	.error-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
		line-height: 40rpx;
	}

	.retry-btn {
		background-color: #ff6b6b;
		color: white;
		border: none;
		padding: 20rpx 40rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.retry-btn:active {
		transform: scale(0.95);
		opacity: 0.9;
	}

	/* 底部购买栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		padding: 20rpx 30rpx 35rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #f0f0f0;
	}

	.selected-info {
		display: flex;
		align-items: center;
		flex: 1;
		overflow: hidden;
	}

	.select-label {
		font-size: 28rpx;
		color: #666;
		white-space: nowrap;
	}

	.select-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin: 0 12rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
	}

	.price-container {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-left: 10rpx;
	}

	.select-price {
		font-size: 38rpx;
		color: #ff6b6b;
		font-weight: bold;
		font-family: 'Helvetica Neue', Arial, sans-serif;
	}

	.price-saving {
		font-size: 22rpx;
		color: #ff9f43;
		margin-top: 2rpx;
		background-color: #fff5e6;
		padding: 2rpx 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid #ffe6cc;
	}

	.purchase-btn {
		background: linear-gradient(135deg, #ff6b6b, #ff8e53);
		color: white;
		font-size: 34rpx;
		font-weight: bold;
		padding: 0 50rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		border: none;
		box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		transition: all 0.3s ease;
		margin-left: 30rpx;
	}

	.purchase-btn:active {
		transform: scale(0.96);
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
	}

	.btn-arrow {
		font-size: 30rpx;
		font-weight: bold;
		transition: transform 0.3s ease;
	}

	.purchase-btn:active .btn-arrow {
		transform: translateX(6rpx);
	}

	/* 弹窗样式 */
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.popup-content {
		background-color: white;
		border-radius: 20rpx;
		padding: 40rpx;
		width: 80%;
		max-width: 500rpx;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.popup-body {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.payment-amount {
		font-size: 48rpx;
		font-weight: bold;
		color: #ff6b6b;
		display: block;
		margin-bottom: 10rpx;
	}

	.payment-package {
		font-size: 28rpx;
		color: #666;
	}

	.popup-footer {
		display: flex;
		gap: 20rpx;
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		border: none;
	}

	.cancel-btn {
		background-color: #f0f0f0;
		color: #666;
	}

	.confirm-btn {
		background-color: #ff6b6b;
		color: white;
		font-weight: bold;
	}

	/* 支付方式选择样式 */
	.payment-methods {
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #e6e6e6;
	}

	.payment-methods-title {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.payment-method-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		background-color: #f9f9f9;
		margin-bottom: 20rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		position: relative;
		transition: all 0.3s ease;
	}

	.payment-method-item.active {
		background-color: #fff5f5;
		border: 2rpx solid #ff6b6b;
	}

	.payment-method-name {
		font-size: 32rpx;
		color: #333;
	}

	.payment-method-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #ff6b6b;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
	}

	/* 成功弹窗 */
	.success-popup {
		text-align: center;
	}

	.success-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #52c41a;
		color: white;
		font-size: 60rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 20rpx;
	}

	.success-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.success-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
		display: block;
	}

	.success-btn {
		background-color: #ff6b6b;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		border: none;
		width: 100%;
	}

	/* 套餐部分容器 */
	.packages-section-content {
		width: 100%;
	}

	/* 加载和错误状态 */
	.loading-container,
	.error-container {
		text-align: center;
		padding: 60rpx 0;
		color: #666;
	}

	.retry-btn {
		margin-top: 20rpx;
		background-color: #ff6b6b;
		color: white;
		border: none;
		padding: 20rpx 40rpx;
		border-radius: 40rpx;
	}

	/* 响应式调整 */
	@media (max-width: 320px) {
		.packages-list {
			padding: 0 20rpx;
		}

		.package-item {
			padding: 20rpx;
		}

		.bottom-bar {
			padding: 15rpx 20rpx;
		}
	}
</style>